/* eslint-disable no-sequences */
import { Form, Input, Button, Checkbox } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { debounce } from "../../../utils/debounce";
const { Item } = Form;
export default function FormItem(props) {
  // 自定义校验函数
  const validator = (rule, value, callback) => {
    const length = value && value.length;
    const pwdReg = /^[a-zA-Z0-9_]+$/;
    if (!value) {
      return Promise.reject("必须输入密码");
    } else if (length <= 4) {
      return Promise.reject("密码必须大于 4 位");
    } else if (length > 12) {
      return Promise.reject("密码必须小于 12 位");
    } else if (!pwdReg.test(value)) {
      return Promise.reject("密码必须是英文、数组或下划线组成");
    } else {
      return Promise.resolve();
    }
  };
  const sum = (e, type) => {
    console.log(e, type);
  };
const formItemProps={
  name:'account',
  validateTrigger:'onBlur'
}
  return (
    <Form
      name="normal_login"
      className="login-form"
      initialValues={{
        remember: true,
      }}
      onFinish={props.onFinish}
    >
      <Item
        // name="account"
        // validateTrigger="onBlur"
        {...formItemProps}
        rules={[
          {
            required: true,
            message: "请输入账号",
          },
          { min: 4, message: "用户名必须大于 4 位" },
          { max: 12, message: "用户名必须小于 12 位" },
          {
            pattern: /^[a-zA-Z0-9_]+$/,
            message: "用户名必须是英文、数组或下划线 组成",
          },
        ]}
      >
        <Input
          prefix={<UserOutlined className="site-form-item-icon" />}
          placeholder="Username"
          onChange={debounce((e) => {
            sum(e.target.value, "a");
          }, 1000)}
        />
      </Item>

      <Item name="password" rules={[{ validator: validator }]} validateTrigger="onBlur">
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="Password"
        />
      </Item>

      <Item>
        <Button type="primary" htmlType="submit" className="login-form-button">
          登录
        </Button>
      </Item>
    </Form>
  );
}
